<template>
    <div>
        <TodoItem 
            v-for="item in todoList" 
            :key="item.id" 
            :item="item" 
            @setStatus="setStatus"
            @removeTodo="removeTodo"
            @setDoing="setDoing"
        />
    </div>
</template>

<script lang="ts">
    import TodoItem from './TodoItem.vue'
    import { defineComponent, PropType } from 'vue'
    import { ITodo } from '../typing'
import { IUseTodo, useTodo } from '../hooks/todoList'
    export default defineComponent({
        name: 'TodoList',
        props: {
            todoList: Array as PropType < ITodo[] >
        },
        components: {
            TodoItem
        },
        setup(){
            const {
                setStatus, 
                removeTodo, 
                setDoing
            }:IUseTodo = useTodo()
            return{
                setStatus,
                removeTodo,
                setDoing
            }

        }

    })
</script>

<style>

</style>